<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/layout' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/activecode' }">活码管理</el-breadcrumb-item>
      <el-breadcrumb-item>子码管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-button type="primary" @click="dialogVisible=true">新增子码</el-button>
      <el-button type="danger" @click="deleteallchildrencode" style="margin-left:20px">删除全部子码</el-button>
      <el-button type="danger" @click="deletesomechildrencode" style="margin-left:20px">批量删除子码</el-button>

      <el-table
        :data="tableData"
        border
        style="width: 100%"
        stripe
        @selection-change="tableselection"
      >
        <el-table-column type="selection" align="center"></el-table-column>
        <el-table-column prop label="#" type="index" align="center"></el-table-column>
        <el-table-column prop="originalname" label="子码名称" align="center">
          <template slot-scope="scope">{{scope.row.originalname.split(".")[0]}}</template>
        </el-table-column>
        <el-table-column prop="path" label="子码二维码" align="center">
          <template slot-scope="scope">
            <div style="width: 100px; height: 100px; overflow: hidden;  margin: 0 auto;">
              <el-image :src="$url+scope.row.path" :preview-src-list="srcList"></el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="子码状态" align="center">
          <template slot-scope="scope">
            <div>{{scope.row.status?"使用中":"停用"}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="impression" label="展现量（每日统计）" align="center"></el-table-column>
        <el-table-column prop="identifynum" label="识别量" align="center"></el-table-column>
        <el-table-column prop="restrictedmode" label="子码扫描阀值" align="center"></el-table-column>

        <!-- 操作列 -->
        <el-table-column prop="deal" label="操作">
          <template slot-scope="scope" class="dealbtn">
            <el-tooltip class="item" effect="dark" content="编辑子码" placement="top">
              <el-button
                class="btn"
                type="primary"
                icon="el-icon-edit"
                @click="editchildcode(scope.row)"
              ></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除活码" placement="top">
              <el-button
                class="btn"
                type="danger"
                icon="el-icon-delete"
                @click="deletechildcode(scope.row._id)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 上传子码模态框 -->
    <el-dialog title="上传子码" :visible.sync="dialogVisible" width="40%">
      <div class="upload">
        <el-upload
          class="upload-demo"
          drag
          :action="$url+'subcode/upsubcode'"
          multiple
          :auto-upload="false"
          ref="upload"
          :headers="headers"
          :before-upload="handleBefore"
          :on-change="show"
          :data="parameter"
          :on-success="uploadsuccess"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将文件拖到此处，或
            <em>点击上传</em>
          </div>
        </el-upload>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitUpload">上 传</el-button>
      </span>
    </el-dialog>
    <!-- 编辑子码 -->
    <el-dialog title="编辑子码" :visible.sync="editchildcodevisible" width="40%">
      <el-form ref="form" :model="form" label-width="150px">
        <el-form-item label="子码id" prop="id" required>
          <el-input v-model="form.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="子码名称" prop="originalname" required>
          <el-input v-model="form.originalname"></el-input>
        </el-form-item>
        <el-form-item label="子码状态" prop="status" required>
          <el-switch v-model="form.status" active-text="使用中" inactive-text="停用"></el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editchildcodevisible = false">取 消</el-button>
        <el-button type="primary" @click="submiteditchildcode">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getsubcode, setsubcode, delsubcode, allsubcode } from "../axios/api";
import { deletemodal } from "../components/util";
export default {
  data() {
    return {
      tableData: [],
      total: 0,
      dialogVisible: false, //上传子码模态框
      editchildcodevisible: false, //编辑子码模态框
      ids: [], //批量删除id
      showFile: true, //上传文件是否显示
      form: {
        originalname: "",
        status: true,
        id: "",
      }, //子码模态框form数据
      qrobj: [],
      key: -1,
      parameter: {
        suburl: "",
        restrictedmode: 10,
        qrcodeid: "",
      },
      headers: {
        Authorization: sessionStorage.getItem("token"),
      },
      srcList: [],
    };
  },
  created() {
    this.parameter.qrcodeid = this.$route.query.id;
    this.parameter.restrictedmode = this.$route.query.mode;
    this.getchildrencode();
  },
  methods: {
 
    //获取子码列表
    async getchildrencode() {
      const res = await getsubcode({ page: 1, id: this.parameter.qrcodeid });
      if (res.status == 201) {
        res.data.date.forEach((item) => {
          this.srcList.push(this.$url + item.path);
        });
        this.tableData = res.data.date;

        this.total = res.data.total;
      }
    },
    //=======上传子码图片=======start*/
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleBefore(file) {
      this.key += 1;
      this.parameter.suburl = this.qrobj[this.key].suburl;
    },
    show(file) {
      qrcode.decode(this.getObjectURL(file.raw));
      qrcode.callback = (suburl) => {
        if (suburl != "error decoding QR Code") {
          this.qrobj.push({ suburl });
        } else {
          this.$message.error("图片无法解析");
          return;
        }
      };
    },
    getObjectURL(file) {
      let url = null;
      if (window.createObjectURL != undefined) {
        url = window.createObjectURL(file);
      } else if (window.URL != undefined) {
        url = window.URL.createObjectURL(file);
      } else if (window.webkitURL != undefined) {
        url = window.webkitURL.createObjectURL(file);
      }
      return url;
    },
    /*===============================end */
    //子码上传成功回调
    uploadsuccess(response, file, fileList) {
      this.$message.success("子码上传成功");
      this.dialogVisible = false;
      this.$refs.upload.clearFiles();
      this.getchildrencode();
    },
    //编辑子码
    editchildcode(record) {
      this.editchildcodevisible = true;
      this.form = {
        originalname: record.originalname,
        status: record.status,
        id: record._id,
      };
    },
    //提交编辑后的子码
    async submiteditchildcode() {
      const res = await setsubcode(this.form);
      if (res.status == 201) {
        this.$message.success("修改子码成功");
        this.editchildcodevisible = false;
        this.getchildrencode();
      }
    },
    //删除单个子码
    async deletechildcode(uid) {
      const res = await deletemodal();
      if (!res) return;
      const response = await delsubcode({ data: { id: [uid] } });
      console.log(response);
      if (response.status == 200) {
        this.$message.success("删除子码成功");
        this.getchildrencode();
      }
    },
    //删除全部子码
    async deleteallchildrencode() {
      const res = await deletemodal();
      if (!res) return;
      const response = await allsubcode({
        data: { qrcodeid: this.parameter.qrcodeid },
      });
      if (response.status == 200) {
        this.$message.success("删除全部子码成功");
        this.getchildrencode();
      }
    },
    //选项发生变化时回调
    async tableselection(select) {
      let uid = [];
      select.forEach((element) => {
        uid.push(element._id);
      });
      this.ids = uid;
    },
    //批量删除子码
    async deletesomechildrencode() {
      const res = await deletemodal();
      if (!res) return;
      const response = await delsubcode({ data: { id: this.ids } });
      if (response.status == 200) {
        this.$message.success("删除子码成功");
        this.getchildrencode();
      }
    },
  },
};
</script>
<style lang="less" scoped>
.upload {
  text-align: center;
  margin-top: 10px;
}
</style>